<template>
    <div class="testPaper">
        <!--导航-->
        <nav>
            <div @click="back">
                <van-icon name="arrow-left"/>
            </div>
            <div>
               仿真模考
            </div>
            <div @click="()=>{this.$router.push('/search')}">
                <van-icon name="search" />
            </div>
        </nav>

        <!--选择-->
        <div class="select">
            <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1" />
                <van-dropdown-item v-model="value2" :options="option2" />
                <van-dropdown-item v-model="value3" :options="option3" />
            </van-dropdown-menu>
        </div>
        <!-- 空状态 -->
        <div class="wrap">
            <img src="../../../public/img/empty.0d284c2e.png" alt="">

        </div>
        <p>请稍后，套卷正在赶来的路上啦</p>

    </div>
</template>

<script>
    import axios from "axios";
    export default {
        name: "TestPaper",
        data() {
            return {
                activeKey: 0,
                value1: 0,
                value2: "a",
                value3:'A',
                option1: [
                    {text: '考试类型', value: 0 },
                    { text: "全部", value: 1 },
                    { text: "模拟考试", value: 2 },
                    { text: "正式考试", value: 3 },
                ],
                option2: [
                    {text: "考试状态", value: "a" },
                    { text: "全部", value: "b" },
                    { text: "已做", value: "c" },
                    { text: "未做", value: "d" },
                ],
                option3: [
                    {text: "参考状态", value: "A" },
                    { text: "全部", value: "B" },
                    { text: "已做", value: "C" },
                    { text: "未做", value: "D" },
                ],
                About: [],
                bout: '',
            };
        },
        created(){
            axios.get("http://localhost:8080/testPaper.json").then((res) => {
                this.About=[...res.data.data.users];
            });
        },
        methods:{
            //回退
            back(){
                window.history.back()
            },
            OnClick() {
                this.bout=this.About[this.activeKey].cname.name_z;
            },
        }
    }
</script>

<style scoped lang="scss">
    @mixin flexStyle{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .testPaper{
        width: 100%;
        background: white;
        height: 100vh;
        nav{
            @include flexStyle;
            font-size: 4.8vw;
            height: 11.7vw;
            position: fixed;
            top: 0;
            z-index: 999;
            background: #fff;
            .van-icon{
                font-size: 6vw;
                color: #2c3e50;
            }
        }

        .select{
            width: 100%;
            margin-top: 11.7vw;
            /deep/.van-dropdown-menu__title{
                font-size: 4vw;
                line-height: 6vw;
            }
            /deep/.van-dropdown-menu__bar{
                height: 9.4vw;
            }
            /deep/.van-cell{
                /*position: fixed;*/
                /* top: 10vw;*/
            }
            /deep/.van-sidebar{
                width: 30vw;
            }
            /deep/.van-sidebar-item{
                font-size: 4vw;
                line-height: 8.6vw;
                text-align: center;
            }
            /deep/.van-sidebar-item--select::before {
                height: 7.13333vw;

            }
            /deep/.van-cell{
                font-size: 3.8vw;
                height: 10vw;
                text-align: center;
            }
            /deep/.van-dropdown-item__option--active{
                text-align: center;
            }
        }
        .box{
            display: flex;
        }
        .bos{
            font-size: 4.5vw;
        }

        .wrap{
            width: 100%;
            display: flex;
            justify-content: center;
            img{
                width: 50%;
            }
        }
        p{
            font-size: 4.6vw;
            margin-top: 2vw;
            color: #b7b7b7;
            text-align: center;
        }
    }
</style>